<template>
  <!-- 搜索区域 -->
  <div style="display: flex">
    <el-button type="primary" style="margin-right: 15px" @click="addItem">新增</el-button>
    <el-input v-model="search" placeholder="请输入类型名称"
              style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
    <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
    </el-button>
  </div>

  <!-- 课程类型表格 -->
  <el-table :data="tableData" :row-style="{ height: '77px' }" border
            style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
    <el-table-column align="center" prop="name" label="课程类型名称" width="180"/>
    <el-table-column align="center" prop="typeDesc" label="课程类型描述" width="auto"/>
    <el-table-column align="center" fixed="right" label="操作" width="200">
      <template v-slot="scope">
        <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--      分页-->
  <div style="margin-top: 10px">
    <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    />
  </div>

  <!-- 添加/编辑对话框 -->
  <el-dialog :close-on-click-modal="false" title="类型操作" v-model="dialogVisible" width="560" @close="reset('form')">
    <el-form label-position="left" :inline="true" :model="form" ref="form" :rules="rules">
      <el-form-item label="类型名称" style="width: 90%" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" clearable/>
      </el-form-item>
      <el-form-item label="类型描述" style="width: 90%" prop="typeDesc">
        <el-input
                v-model="form.typeDesc"
                type="textarea"
                :rows="3"
                placeholder="请输入描述"
                clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset('form')">取消</el-button>
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {ref} from 'vue'
  import request from "~/utils/request.js";

  export default {
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        form: {},
        search: '',
        currentPage: 1,
        pageSize: 10,
        total: 0,
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
        }
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        request.get("/course-type/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
          if (res.code === '200') {
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            ElMessage.error("错误" + res.msg)
          }
        })
      },
      editItem(item) {
        Object.assign(this.form, item)
        this.dialogVisible = true
      },
      addItem() {
        this.dialogVisible = true;
      },
      // 删除
      deleteItem(scope) {
        this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.get("/course-type/delete/" + scope).then(res => {
            if (res.code === '200') {
              this.$message.success("成功")
              this.load()
            } else {
              this.$message.error(res.msg)
            }
          })
        });
      },
      // 提交
      submitForm(val) {
        this.$refs[val].validate((valid) => {
          if (valid) {
            request.post("/course-type/edit", this.form).then(res => {
              if (res.code === '200') {
                this.$message({
                  message: "成功",
                  type: "success"
                })
                this.load()
                this.reset(val)
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
      },
      // 取消
      reset(val) {
        this.dialogVisible = false;
        this.form = {};
        this.$refs[val].resetFields();
      },
      handleCurrentChange(item) {
        // 改变当前页码触发
        this.currentPage = item
        this.load()
      },
      handleSizeChange(item) {   // 改变当前每页的个数触发
        this.pageSize = item
        this.load()
      },
    }
  }
</script>

<style scoped>
</style>
